<style>
    body{
        background: #f5f5f5;
    }
</style>
<div class="sectionY">
    <a href="javascript:history.back()">
        <img src="__PUBLIC__/home/images/a4.png" class="a1" alt="">
    </a>
    <p class="p1">我的订单</p>
</div>
<div class="kong1"></div>
<div class="ding_section1">
    <div class="ding_section1_1 clearfix">
        <ul>
            <li {if $status==0}class="select"{/if} data-status="0">
                <span class="s1">待付款</span>
            </li>
            <li {if $status==1}class="select"{/if} data-status="1">
                <span class="s1">待发货</span>
            </li>
            <li {if $status==2}class="select"{/if} data-status="2">
                <span class="s1">待收货</span>
            </li>
            <li {if $status==3}class="select"{/if} data-status="3">
                <span class="s1">已完成</span>
            </li>
        </ul>
    </div>
</div>
<div class="ding_section2">
    <div class="ding_section2_1 content">
        <div class="content1"></div>
    </div>
</div>
<script>
    $(function () {
        $(".ding_section1_1 li").click(function () {
            $(this).addClass('select').siblings().removeClass('select')
            params.status = $(this).data('status')
            mm.opts.loadUpFn(mm)
        })
    })
</script>

<script>
    var params = {
        page: 0,
        page_size: 10,
        status:'{$status}'
    };
    var mm;
    $(function () {

        var dh = $(window).height();
        $('body').height(dh)
        // dropload
        mm = $('.content').dropload({
            scrollArea: window,
            domUp: {
                domClass: 'dropload-up',
                domRefresh: '<div class="dropload-refresh" style="color: #ccc">↓下拉刷新</div>',
                domUpdate: '<div class="dropload-update" style="color: #ccc">↑释放更新</div>',
                domLoad: '<div class="dropload-load" style="color: #ccc"><span class="loading"></span>加载中</div>'
            },
            domDown: {
                domClass: 'dropload-down',
                domRefresh: '<div class="dropload-refresh" style="color: #ccc">↑上拉加载更多</div>',
                domLoad: '<div class="dropload-load" style="color: #ccc"><span class="loading"></span>加载中</div>',
                domNoData: '<div class="dropload-noData" style="color: #ccc">暂无更多数据</div>'
            },
            loadUpFn: function (me) {
                params.page = 1;
                var _html = '';
                $.ajax({
                    url: '{:url("Order/lists")}',
                    data: params,
                    dataType: "JSON",
                    type: "POST",
                    success: function (res) {
                        var data = res.result_data;
                        if (data.length > 0) {
                            _html = formatList(data);
                        }
                        $('.content1').html(_html);
                        // 每次数据加载完，必须重置
                        me.resetload();
                        // 重置页数，重新获取loadDownFn的数据
                        page = 1;
                        // 解锁loadDownFn里锁定的情况
                        me.unlock();
                        me.noData(false);
                    },
                    error: function (res) {
                        alert(res);
                    }
                })
            },
            loadDownFn: function (me) {
                params.page++;
                var _html = '';
                $.ajax({
                    url: '{:url("Order/lists")}',
                    data: params,
                    dataType: "JSON",
                    type: "POST",
                    success: function (res) {
                        var data = res.result_data;
                        if (data.length > 0) {
                            _html = formatList(data);
                        } else {
                            // 锁定
                            me.lock();
                            // 无数据
                            me.noData();
                        }
                        // 插入数据到页面，放到最后面
                        $('.content1').append(_html);
                        // 每次数据插入，必须重置
                        me.resetload();
                    },
                    error: function (res) {
                        alert(res);
                    }
                })
            },
            threshold: 50
        });
    });

    function formatList(data) {
        var _html = '';
        $.each(data, function (i, v) {
            _html += '\n' +
                '        <div class="list">\n' +
                '            <div class="a1 clearfix">\n' +
                '                <p class="p1">订单号：'+v.order_sn+'</p>\n' +
                '                <p class="p2">等待付款</p>\n' +
                '            </div>\n';
            $.each(v.data, function (ii,vv) {
                _html += '            <div class="a2 clearfix">\n' +
                '                <div class="left">\n' +
                '                    <img src="'+vv.img_url+'" alt="">\n' +
                '                </div>\n' +
                '                <div class="right">\n' +
                '                    <p class="p1 chao">'+vv.title+'</p>\n' +
                '                    <p class="p2">'+vv.spec_title+'</p>\n' +
                '                    <div class="aq clearfix">\n' +
                '                        <p class="pm">'+vv.price+'SCB</p>\n' +
                '                        <p class="pn">x'+vv.num+'</p>\n' +
                '                    </div>\n' +
                '                </div>\n' +
                '            </div>\n';
            });
                _html += '            <div class="a3 clearfix">\n' +
                '                <p class="p1">商品合计: <span class="s1">'+v.money+'</span></p>\n' +
                '                <p class="p2">\n';
            var url = "{:url('Order/detail')}?orderSn="+v.order_sn;
            var pay_url = "{:url('Order/pay')}?orderSn="+v.order_sn;
            if(v.status == 0){
                _html += '                    <a href="javascript:;" class="cancelBtn z1" data-id="'+v.id+'">取消订单</a>\n' +
                    '                    <a href="'+pay_url+'" class="z2">立即付款</a>\n';
            }else if(v.status == 1){
                _html += '                    <a href="'+url+'" class="z2">查看订单</a>\n';
            }else if(v.status == 2){
                _html += '                    <a href="javascript:;" class="receiveBtn z1" data-id="'+v.id+'">确认收货</a>\n' +
                    '                    <a href="'+url+'" class="z2">查看订单</a>\n';
            }else{
                _html += '                    <a href="'+url+'" class="z2">查看订单</a>\n';
            }
            _html += '                </p>\n' +
                '            </div>\n' +
                '        </div>';
        })
        return _html;
    }
</script>
<script type="text/javascript">
    $(function () {
        $("body").on('click','.cancelBtn',function () {
            var order_id = $(this).attr('data-id');
           layer.confirm('确认取消订单?',function () {
                modal.ajax("{:url('Order/cancel')}",{order_id:order_id},function (res) {
                    modal.msg(res.result_info);
                    if(res.result_code==0){
                        setTimeout(function () {
                            window.location.reload();
                        },1000);
                    }
                });
            });
        });
        $("body").on('click','.receiveBtn',function () {
            var order_id = $(this).attr('data-id');
            layer.confirm('确认已收到商品?',function () {
                modal.ajax("{:url('Order/receive')}",{order_id:order_id},function (res) {
                    modal.msg(res.result_info);
                    if(res.result_code==0){
                        setTimeout(function () {
                            window.location.reload();
                        },1000);
                    }
                });
            });
        });
    });
</script>